<template>
  <div>
    <h1 style="font-size:18px;">Modal 对话框</h1>
    <p>渲染弹出对话框，常用于表单提交，用户确认信息等场景。</p>
    <h2 style="font-size:14px;">基础用法</h2>
    <br>
    <div class="test-model">
      <Button type="primary" @click="showModel = true">显示对话框</Button>
      <Model v-model="showModel" @on-visible-change="modelStateChange"></Model>
    </div>
    <p>最简单的使用方法，通过控制属性 <code>v-model</code> 来显示 / 隐藏对话框。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Button type=&quot;primary&quot; @click=&quot;showModel = true&quot;&gt;显示对话框&lt;/Button&gt;
        &lt;Model v-model=&quot;showModel&quot;&gt;&lt;/Model&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            showModel: false
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2 style="font-size:14px;">自定义用法</h2>
    <br>
    <div class="test-model">
      <Button type="primary" @click="showModel1 = true">自定义对话框</Button>
      <Model v-model="showModel1">
        <template #header>
          我是头部
        </template>
        <div>
          我是内容
        </div>
        <template #footer>
          <div>我是底部</div>
          <Button type="success" @click="showModel1 = false">确认</Button>
          <Button @click="showModel1 = false">取消</Button>
        </template>
      </Model>
    </div>
    <p>Modal 组件提供了灵活的自定义样式 API 和 Slot，可以自由控制整个 Modal 的各个组成部分，比如页头、内容、页脚、关闭按钮。</p>
    <p>通过和其它组件的交互，能实现更复杂的功能，满足了大多业务场景。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Button type=&quot;primary&quot; @click=&quot;showModel1 = true&quot;&gt;自定义对话框&lt;/Button&gt;
        &lt;Model v-model=&quot;showModel1&quot;&gt;
          &lt;template #header&gt;
            我是头部
          &lt;/template&gt;
          &lt;div&gt;
            我是内容
          &lt;/div&gt;
          &lt;template #footer&gt;
            &lt;div&gt;我是底部&lt;/div&gt;
            &lt;Button type=&quot;success&quot;&gt;确认&lt;/Button&gt;
            &lt;Button @click=&quot;showModel1 = false&quot;&gt;取消&lt;/Button&gt;
          &lt;/template&gt;
        &lt;/Model&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            showModel1: false
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2 style="font-size:14px;">自定义宽度/高度</h2>
    <br>
    <div class="test-model">
      <Button type="primary" @click="showModel2 = true">自定义宽度/高度</Button>
      <Model v-model="showModel2" title="自定义宽度/高度" top="300px" width="300px">
        <div>
          自定义width，单位 px，默认 450px。<br>
          自定义title属性，可设置标题内容，默认 Model。<br>
          自定义top属性，可设置Model距页面顶部距离，单位px，默认 100px。
        </div>
      </Model>
    </div>
    <p>自定义 <code>width</code> ，单位 <code>px</code> ，默认 <code>450px</code> 。</p>
    <p>自定义 <code>title</code> 属性，可设置标题内容，默认 <code>Model</code> 。</p>
    <p>自定义 <code>top</code> 属性，可设置 <code>Model</code> 距页面顶部距离，单位 <code>px</code> ，默认 <code>100px</code> 。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Button type=&quot;primary&quot; @click=&quot;showModel2 = true&quot;&gt;自定义宽度/高度&lt;/Button&gt;
        &lt;Model v-model=&quot;showModel2&quot; title=&quot;自定义宽度/高度&quot; top=&quot;300px&quot; width=&quot;300px&quot;&gt;
          &lt;div&gt;
            自定义width，单位 px，默认 500px。&lt;br&gt;
            自定义title属性，可设置标题内容，默认 Model。&lt;br&gt;
            自定义top属性，可设置Model距页面顶部距离，单位px，默认 100px。
          &lt;/div&gt;
        &lt;/Model&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            showModel2: false
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2 style="font-size:14px;">API</h2>
    <p>Modal props</p>
    <Table :columns="tableColumn" :data="tableData"></Table>
    <br>
    <p>Modal events</p>
    <Table :columns="tableColumn1" :data="tableData1"></Table>
  </div>

</template>

<script>
export default {
  name: 'TestModel',
  data () {
    return {
      showModel: false,
      showModel1: false,
      showModel2: false,
      tableColumn: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          key: 'explain'
        },
        {
          title: '类型',
          key: 'type'
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableColumn1: [
        {
          title: '事件名',
          key: 'event'
        },
        {
          title: '说明',
          key: 'type'
        },
        {
          title: '返回值',
          key: 'callback'
        }
      ],
      tableData: [
        {
          attribute: 'v-model',
          explain: '对话框是否显示。',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'showMask',
          explain: '对话框是否显示遮罩层。',
          type: 'Boolean',
          default: 'true'
        },
        {
          attribute: 'disableScroll',
          explain: '对话框是否禁止页面滚动。',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'title',
          explain: '对话框的标题。',
          type: 'String',
          default: 'Model'
        },
        {
          attribute: 'top',
          explain: '对话框距离页面顶部距离。',
          type: 'String | Number',
          default: '100px'
        },
        {
          attribute: 'width',
          explain: '对话框的宽度。',
          type: 'String | Number',
          default: '500px'
        }
      ],
      tableData1: [
        {
          event: 'on-visible-change',
          type: '对话框状态改变事件',
          callback: 'params: [boolen: 显示、隐藏]'
        },
        {
          event: 'on-ok',
          type: '点击确定按钮事件',
          callback: '-'
        },
        {
          event: 'on-cal',
          type: '点击取消按钮事件',
          callback: '-'
        },
        {
          event: 'on-Close',
          type: '点击关闭icon事件',
          callback: '-'
        }
      ]
    }
  },
  methods: {
    modelStateChange (val) {
      // console.log('state', val)
    },
    resetBtn () {
      this.showModel1 = false
    }
  }
}
</script>

<style scoped lang="less">
h1 {
  font-size: 18px;
  padding: 10px 0;
}
h2 {
  font-size: 14px;
  padding: 10px 0;
}
p{
  padding: 10px 0;
}
.test-model{
  color: black;
}
code{
  background-color: #aaa;
}
pre{
  font-size: 14px;
}
</style>
